<template>
	<view>
		<view class="top">
			<view class="title">
				<view class="name">
					蜜贝
				</view>
				<view class="icon" v-if="false">
					<image src="../static/a7.png" mode=""></image>
					<view class="text">
						兑换
					</view>
				</view>
			</view>
			<view class="card">
				<view class="down">
					<view class="list">
						<image src="../static/a8.png" mode=""></image>
						<view class="name">
							蜜贝总额(Fmb)
						</view>
						<view class="number">
							{{guomi}}
						</view>
					</view>
					<view class="long"></view>
					<view class="list">
						<image src="../static/a9.png" mode=""></image>
						<view class="name">
							累计获得(Fmb)
						</view>
						<view class="number">
							{{profit}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="list" @click="toPage('/pages/htmlB/farm/exchange')">
				<image src="../static/f1.png" mode=""></image>
				<view class="name">
					兑换
				</view>
			</view>
			<view class="list" @click="toPage('/pages/htmlB/farm/exchange-list')">
				<u-badge :offset="[30,40]" type="error" v-if="guomi_count" :isDot="true"></u-badge>
				<image src="../static/f7.png" mode=""></image>
				<view class="name">
					兑换确认
				</view>
			</view>
			<view class="list" @click="toPage('/pages/htmlB/farm/list?current=0')">
				<u-badge :offset="[30,40]" type="error" v-if="shangchuan_count" :isDot="true"></u-badge>
				<image src="../static/f2.png" mode=""></image>
				<view class="name">
					上传凭证
				</view>
			</view>
			<view class="list" @click="toPage('/pages/htmlB/farm/list?current=1')">
				<u-badge :offset="[30,40]" type="error" v-if="queren_count" :isDot="true"></u-badge>
				<image src="../static/f3.png" mode=""></image>
				<view class="name">
					确认凭证
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				蜜贝明细
			</view>
			<view v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="icon"></view>
					<view class="details">
						<view class="name">
							{{item.name}} <text
								v-if="item.telphone">{{item.flag=='OUT'?'转给':'转入'}}{{item.telphone}}</text>
						</view>
						<view class="text">
							{{item.time}}
						</view>
					</view>
					<view class="number" :class="item.flag=='OUT'?'sub':'add'">
						{{item.flag=="OUT"?'-':'+'}}{{item.change}}<text>Fmb</text>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				page: 1,
				list: [],
				profit: "",
				guomi: "",
				guomi_count: false,
				shangchuan_count: false,
				queren_count: false
			}
		},
		onLoad(option) {
			than = this;
			than.kmbList()

		},
		onShow() {
			than.post("api/kmb/redPoint", null, function(data) {
				than.guomi_count = data.guomi_count == 0 ? false : true;
				than.shangchuan_count = data.shangchuan_count == 0 ? false : true;
				than.queren_count = data.queren_count == 0 ? false : true;
			})
		},
		onReachBottom() {
			than.page++
			than.kmbList()
		},
		methods: {
			kmbList() {
				than.post("api/kmb/kmbList", {
					page: than.page
				}, function(data) {
					than.profit = data.profit;
					than.guomi = data.guomi;
					for (let i in data.list) {
						var d = data.list[i]
						switch (d.type) {
							case 'SERVICE_KMB_YUYUE':
								d.name = "兑换蜂巢消耗"
								break;
							case 'SERVICE_KMB_DIRECT':
								d.name = "兑换蜂巢消耗"
								break;
							case 'BUY_MEMBER_CARD':
								d.name = "购买会员卡"
								break;
							case 'TRANSFER_KMB':
								d.name = "出兑蜜贝"
								break;
							case 'INVITE_MEMBER':
								d.name = "邀请奖励"
								break;
							case 'MANUAL_CHANGE_ADMIN':
								d.name = "兑换奖励"
								break;
							case 'APPOINTMENT':
								d.name = "预约消耗"
								break;
							case 'RETURN_APPOINTMENT':
								d.name = "预约返还"
								break;
							case 'TRANSFER_KMB_FAIL':
								d.name = "兑换蜜贝失败"
								break;
							case 'EXCHANGE_GDB_TICKET':
								d.name = "兑换金蜜券"
								break;
							case 'TRANSFER_KMB_FAIL':
								d.name = "兑换失败返还"
								break;
							case 'RETURN_EXCHANGE_GDB_TICKET':
								d.name = "兑换金蜜卷失败返还"
								break;
							case 'SURPRISE_GIVE':
								d.name = "新年彩蛋"
								break;
							case 'ADVANCE_ENTRY':
								d.name = "进场消耗"
								break;
							case 'BUY_CREDIT_SCORE':
								d.name = "恢复信用分"
								break;
							case 'SHAKE_ACTIVE_GIVE':
								d.name = "扭蛋奖励"
								break;
							case 'NOVICE_REWARD':
								d.name = "蜂巢新礼"
								break;
							case 'GROUP_REWARD_SPECIAL':
								d.name = "排名奖励"
								break;
							case 'GROUP_BUY_REWARD':
								d.name = "拼团奖励"
								break;
							case 'LIVE_REWARD':
								d.name = "直播礼物"
								break;
							case 'INTERACT_REWARD_ADMIN':
								d.name = "互动奖励"
								break;
							case 'DISPLACE_TO_KMB':
								d.name = "收获置换"
								break;
							case 'GOODS_EXCHANGE_KMB_COLD':
								d.name = "置换蜜贝"
								break;
							case 'NOVICE_GROUP_REWARD':
								d.name = "新手拼团奖励"
								break;
							case 'REDUCE_GOODS_GIVE':
								d.name = "拆解获得"
								break;
							case 'SHARE_ICON_GIVE':
								d.name = "新人见面礼"
								break;
							case 'GIFT_FOR_NOVICE':
								d.name = "公测大礼包"
								break;
							case 'FRIEND_SHARE':
								d.name = "好友分享礼"
								break;
							case 'APPLY_THAW':
								d.name = "解冻申请"
								break;
							case 'TARGET_REWARD':
								d.name = "达成奖励"
								break;
							case 'THAW_ADD':
								d.name = "兑换蜜贝"
								break;
							case 'THAW_REDUCE':
								d.name = "解冻申请"
								break;
							case 'SHOPPING_KMB_GIVE':
								d.name = "消耗奖励"
								break;
              case 'STUDY_REWARD':
                d.name = " 教程奖励"
                break;
              case 'SIGN_IN_REWARD':
                d.name = "签到奖励"
                break;
						}
					}
					if (than.page == 1) {
						than.list = data.list;
					} else {
						than.list = than.list.concat(data.list)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		padding: 0 36rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
		}

		.list {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			height: 130rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: linear-gradient(90deg, #004FFF, #004FFF);
				border-radius: 50%;
				margin: 0 24rpx;
			}

			.details {
				.name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;

					text {
						font-size: 20rpx;
						color: #999999;
					}
				}

				.text {
					margin-top: 5rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}
			}

			.add {
				color: #F46813;
			}

			.sub {
				color: #333333;
			}

			.number {
				margin-right: 24rpx;
				margin-left: auto;
				font-size: 40rpx;
				font-weight: bold;

				text {
					margin-left: 10rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	page {
		background: #FAFAFA;
	}

	.tabs {
		width: 678rpx;
		height: 160rpx;
		margin: 90rpx auto 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: center;

		.long {
			z-index: 1;
			position: absolute;
			width: 2rpx;
			height: 80rpx;
			background: #F1F1F1;
			opacity: 0.6;
			left: 455rpx;
		}

		.list {
			width: 33%;
			text-align: center;
			color: #111111;
			height: 100%;
			position: relative;

			.name {
				font-size: 26rpx;
				font-weight: bold;
			}

			image {
				width: 74rpx;
				height: 74rpx;
				margin: 24rpx 0 0;
			}

			.number {
				font-size: 48rpx;
				font-weight: bold;
			}
		}
	}

	.top {
		height: 290rpx;

		.card {
			margin: 20rpx auto 0;
			width: 678rpx;
			height: 255rpx;
			background-image: url(../static/a10.png);
			background-size: 100% 100%;
			border-radius: 12rpx;

			.down {
				display: flex;
				align-items: center;
				padding-top: 20rpx;
				position: relative;
				justify-content: center;


				.list {
					width: 50%;
					text-align: center;
					color: #FFFFFF;

					image {
						width: 103rpx;
						height: 103rpx;
					}

					.name {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.number {
						font-size: 60rpx;
						font-family: Myriad Pro;
						font-weight: bold;
						color: #FB683D;
					}
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			padding: 0 38rpx;

			.name {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.icon {
				margin-left: auto;

				image {
					width: 41rpx;
					height: 40rpx;
				}

				.text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}
</style>
